<template>
  <div>
    <search-vm :title="tit" @refreshList="queryVendingList" />
    <div class="main">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="120"
          height="20px"
        >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>

        <el-table-column
          prop="type.name"
          label="设备型号"
          width="120"
          height="20px"
        />
        <el-table-column
          prop="node.name"
          label="详细地址"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column

          label="运营状态"
          show-overflow-tooltip
          height="20px"
        >
          <div class="vm-status">
            <div class="item">
              <div class="success offline-danger">离线</div>
            </div>
            <div class="state-vm item">
              <div class="success">货道</div>
            </div>
            <div class="item">
              <div class="success">传动轴</div>
            </div>
          </div>
        </el-table-column>
        <el-table-column
          prop="vmStatus"
          label="设备状态"
          show-overflow-tooltip
          height="20px"
        />

        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          height="20px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.prevent="lookDetails(scope.row)"
            >
              查看详情
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <!-- 分页组件 -->
        <el-pagination
          background
          :page-size.sync="page.pageSize"
          :current-page.sync="page.pageIndex"
          layout="prev,pager, next,sizes,total"
          :total="total"
          @current-change="getSearchVending"
          @size-change="getSearchVending"
        />
      </el-row>
      <!-- 详情弹窗 -->
      <detail :dialog-visible.sync="dialogVisible" :title="title" :mytea="mytea" />
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { monthRungStart, monthRungEnd, monthDetailStart, monthDetailEnd } from '@/utils/dayjs'
import { getSearchVendingAPI } from '@/api/vmIndex'
import { getTimeFrameAPI, getTimeIncomeAPI, getVendingNumberAPI, getMaintainNumberAPI, getVendingSalesAPI } from '@/api/vmStatus'
import searchVm from '../components/search-vm'
import detail from './components/detail.vue'
// import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {
    searchVm,
    detail
  },
  props: {},
  data() {
    return {
      tit: '设备编号',
      vmStatus: '',
      loading: false,
      page: {
        pageSize: 10,
        pageIndex: 1
      },
      total: 0,
      tableData: [],
      dialogVisible: false,
      monthDetailStart, // 当月第一天带时分秒 例2022-10-01 00:00:00
      monthDetailEnd, // 当月当前时间带时分秒 例2022-10-01 ：15:42:20
      endOf: dayjs(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).format('YYYY-MM-DD HH:mm:ss'), // 当天最后时间
      monthRungStart, // 当月第一天 例2022-10-01
      monthRungEnd, // 当月当前时间 例2022-10-3
      title: {
        salesSome: '', // 销售量
        salesMoney: '', // 销售额
        replenish: 0, // 补货次数
        maintain: 0 // 维修次数
      },

      mytea: [],
      typeArr: []
    }
  },
  computed: {
    // ...mapGetters(['tableData'])
  },
  watch: {},
  created() {
    this.getSearchVending()
    console.log(this.title.salesSome)
  },
  methods: {

    // 发起列表请求
    async getSearchVending() {
      try {
        this.loading = true
        const { data } = await getSearchVendingAPI(this.page.pageIndex, this.page.pageSize)
        console.log(data)
        this.tableData = data.currentPageRecords
        this.total = parseInt(data.totalCount) // 转数值型
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    async  lookDetails(row) {
      this.dialogVisible = true
      console.log(row)
      // 销售量
      const res = await getTimeFrameAPI(this.monthDetailStart, this.monthDetailEnd, row.innerCode)
      console.log(res)
      this.title.salesSome = res.data
      // 获取一定时间范围之内的收入
      const res1 = await getTimeIncomeAPI(this.monthDetailStart, this.endOf, row.innerCode)
      this.title.salesMoney = res1.data
      // 获取售货机补货次数
      const res2 = await getVendingNumberAPI(row.innerCode, this.monthRungStart, this.monthRungEnd)
      this.title.replenish = res2.data
      // 获取售货机维修次数
      const res3 = await getMaintainNumberAPI(row.innerCode, this.monthRungStart, this.monthRungEnd)
      this.title.maintain = res3.data
      // 获取售货机商品销量
      const res4 = await getVendingSalesAPI(row.innerCode, this.monthRungStart, this.monthRungEnd)
      this.mytea = res4.data
    },
    async  queryVendingList(innerCode) {
      try {
        this.loading = true
        const { data } = await getSearchVendingAPI(this.page.pageIndex, this.page.pageSize, innerCode)
        console.log(data)
        this.tableData = data.currentPageRecords
        this.total = parseInt(data.totalCount) // 转数值型
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

  <style scoped lang="scss">
    .vm-status{
    display: flex;
    .item {
    margin-right: 10px;
    .success{
    width: 52px;
    height: 23px;
    background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
    color: #fff;
    border-radius: 14px;
    font-size: 12px;
    text-align: center;
    }
    .offline-danger{
    background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
    }
    }

    }

  </style>

